<!-- 我的任务 -->
<script>
import { getList } from './api'
export default {
  name: '',
  props: {
    // 任务类型  可选值：list 待办任务 默认, history 历史任务
    type: {
      type: String,
      default: 'list',
    },
  },
  data() {
    return {
      getList,
      queryType: 'list',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dealQueryFun(query) {
      let type = this.$route.query.type
      this.queryType = query.type = type || this.type
    },
    dealDataFun(data) {
      data.forEach((element) => {
        let content = element.content
        if (content && content.includes('{')) {
          element.content = JSON.parse(content)
          element.contentIsObj = true
        }
      })
    },
    goRoute(item) {
      // 跳转对应任务的地址
      this.$router.push(`${item.url}${item.url.includes('?') ? '&' : '?'}tasksId=${item.id}&status=${item.status}`)
      // item.url + (item.url.includes('?') ? '&' : '?') + 'status=' + item.status
    },
  },
}
</script>

<template>
  <PullRefreshScrollLoadList :request="getList" :dealQueryFun="dealQueryFun" :dealDataFun="dealDataFun">
    <template v-slot="list">
      <div
        :class="['task', item.status != 0 && 'history']"
        v-for="(item, index) in list"
        :key="index"
        @click="goRoute(item)"
      >
        <div>
          <van-tag v-if="item.statusStr" type="primary" size="medium">{{ item.statusStr }}</van-tag>
          <span class="task-title">{{ item.title }}</span>
        </div>

        <template v-if="item.contentIsObj">
          <div class="task-info" v-for="(item1, key) in item.content" :key="key">
            <span class="key">{{ key }}:</span>
            <span class="value">{{ item1 }}</span>
          </div>
        </template>
        <div class="task-info" v-else>
          {{ content }}
        </div>
        <div class="task-time">{{ item.sendTime }}</div>
      </div>
    </template>
  </PullRefreshScrollLoadList>
</template>

<style lang="less" scoped>
.task {
  padding: 10px 15px;
  background: #ffffff;
  border-radius: 12px;
  & + .task {
    margin-top: 10px;
  }
  .task-title {
    font-weight: 500;
    // margin-left: 10px;
  }
  .task-info {
    font-size: 12px;
    margin: 10px 0;
    .key {
      color: #b5b8c0;
    }
    .value {
      margin-left: 10px;
      color: #5f6063;
    }
  }
  .task-time {
    color: #b5b8c0;
    font-size: 12px;
  }

  &.history {
    opacity: 0.6;
  }
}
</style>
